<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>online</title>


{#	<link rel="stylesheet" type="text/css" href="/static/css/index.css">#}
    	<link rel="stylesheet" type="text/css" href="/static/css/index.css">
	<style type="text/css">
		@-webkit-keyframes getup{
	0%{

	}
	100%{
		transform: translateX(-50%) translateY(-250px);
	}
}

	</style>


    <style type="text/css">
        .banner{
            height: 800px;
            width: 100%;
            background: url("/static/images/banners.jpg") no-repeat center top;
        }
        .banner .logo a{
	display: block;
	text-decoration: none;
	font-size: 21px;
	position: absolute;
	width: 296px;
	height: 58px;
	transform: translateX(-50%);
	left: 50%;
	top: 50%;
	-webkit-animation: getup 2s forwards;
	color: white;
	font-size: 40px;
/*	font-weight: bold;*/
}
    .banner .logo a:hover{
        text-decoration: none;
        color: orange;
    }
    </style>

{#    弹窗引用#}
    <script type="text/javascript" src="/static/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css" />



    <!-- 引入核心js和css -->
    <script type="text/javascript" src="/static/codemirror/lib/codemirror.js"></script>
    <link rel="stylesheet" href="/static/codemirror/lib/codemirror.css">

    <!-- 使用主题 -->
    <link href="/static/codemirror/theme/dracula.css" rel="stylesheet" type="text/css">

    <script src="/static/codemirror/mode/python/python.js"></script>

    <!-- 支持搜索 -->
    <script src="/static/codemirror/addon/selection/active-line.js"></script>
    <script src="/static/codemirror/addon/search/search.js"></script>
    <script src="/static/codemirror/addon/search/searchcursor.js"></script>
    <script src="/static/codemirror/addon/search/jump-to-line.js"></script>

    <!--支持代码折叠-->
    <link rel="stylesheet" href="/static/codemirror/addon/fold/foldgutter.css"/>
    <script src="/static/codemirror/addon/fold/foldcode.js"></script>
    <script src="/static/codemirror/addon/fold/foldgutter.js"></script>
    <script src="/static/codemirror/addon/fold/brace-fold.js"></script>
    <script src="/static/codemirror/addon/fold/indent-fold.js"></script>
    <script src="/static/codemirror/addon/fold/comment-fold.js"></script>

    <!--全屏模式-->
    <link rel="stylesheet" href="/static/codemirror/addon/display/fullscreen.css">
    <script src="/static/codemirror/addon/display/fullscreen.js"></script>

    <!--括号匹配-->
    <script src="/static/codemirror/addon/edit/matchbrackets.js"></script>
    <script src="/static/codemirror/addon/edit/closebrackets.js"></script>

    <!--自动补全-->
    <link rel="stylesheet" href="/static/codemirror/addon/hint/show-hint.css">
    <script src="/static/codemirror/addon/hint/show-hint.js"></script>
    <script src="/static/codemirror/addon/hint/anyword-hint.js"></script>




</head>
<body>
        {#        我的弹窗#}
    <div class="modal fade" id="myModal1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                        <h4 class="modal-title" align="center">我的信息</h4>
                        <br/>
                        <form class="form-horizontal" role="form" >
                            <div class="form-group">
                                <label for="name" class="col-sm-offset-2 col-sm-2 control-label">学号</label>
                                <label for="name" class="col-sm-offset-2 col-sm-2 control-label">{{ Snum }}</label>

                            </div>
                            <div class="form-group">
                                <label for="password" class="col-sm-offset-2 col-sm-2 control-label">姓名</label>
                                <label for="name" class="col-sm-offset-2 col-sm-2 control-label">{{ user_id }}</label>
                            </div>
                            <div class="form-group">
                                <label for="password" class="col-sm-offset-2 col-sm-2 control-label">手机号</label>
                                <label for="name" class="col-sm-offset-2 col-sm-2 control-label">{{ phone }}</label>
                            </div>
                        </form>
                </div>
                <div class="modal-footer">
                </div>
            </div>
            <!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->



	<div class="advertise">
		<div class="adv-text">
			<p><广告></p>
		</div>
	</div>


	<div class="nav">
		<div class="nav-left">
			<a href="#">DELI</a>
		</div>

		<div class="nav-list">
			<ul>
                <a href="{{ url_for('index') }}">主页</a>
				<a href="http://127.0.0.1:5000/test/1">学习</a>
				<a href="#">反馈</a>
				<a href="#">关于</a>
                <a href="#" class="tbox">我的</a>
			</ul>
		</div>

        {% if user_id %}
                <div style="line-height: 44px;text-align: center;">
			        <a style="color: white;text-decoration: none;" >你好{{ user_id }}，</a>
			        <a style="color: white;text-decoration: none;" href="{{ url_for('logout') }}">退出</a>
                </div>
        {% else %}
                <div style="line-height: 44px;text-align: center;">
                    <a style="color: white;text-decoration: none;" href='{{ url_for('login') }}'>登录|</a>
                    <a style="color: white;text-decoration: none;" href="{{ url_for('register') }}">注册</a>
                </div>
        {% endif %}
	</div>

	<div class="banner">
{#		<div class="logo">#}
{#			<a href="#">在线编译系统</a>#}
{##}
{#		</div>#}

		<div class="questions">
			<textarea>
                        {{ codeText }}
			</textarea>
		</div>

        <form method="post">
		 <div class="code-left">
        {#        button的(class)uk-button uk-button-primary属性#}
             <button type="submit" class="uk-button uk-button-primary" onclick="myFunction()">提交运行</button>
             <div class="code-left-inset">

{#        textarea 内预设文本#}
{#        name='code' 规定文本名称#}
        {% if result %}
            <textarea id="code" name="code">{{ result }}</textarea>
            {% else %}
            <textarea id="code" name="code"># -*- coding: gbk -*-&#10;print('hi')</textarea>
        {% endif %}

			</div>
		</div>

		<div class="code-right">
			<button type="submit">运行结果</button>
			<div class="code-right-inset">
        {% if info %}
            <textarea name="result" id="result">{{ info }}</textarea>
        {% else %}
            <textarea name="result" id="result"></textarea>
        {% endif %}
		    </div>
	    </div>
        </form>
    </div>
    <div class="footer">
		<ul>
          <li style="margin-left: 200px; color: white;">保存所有权利</li>
          <li><a href="#">隐私政策|</a></li>
          <li><a  href="#">使用条款|</a></li>
          <li><a  href="#">销售政策|</a></li>
          <li><a  href="#">网站地图</a></li>
      </ul>
	</div>
</body>




<script type="text/javascript">
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        mode:"text/x-python",
        lineNumbers: true,     // 显示行数
        indentUnit: 4,         // 缩进单位为4
        styleActiveLine: true, // 当前行背景高亮
        matchBrackets: true,   // 括号匹配
        autoCloseBrackets: true,//自动关闭括号
        lineWrapping: true,    // 自动换行
        theme: 'dracula',      // 使用模版
        showHint:true,
        extraKeys: {"Atl-Space":"autocomplete","Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
        foldGutter: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
    });
    {#大小#}
    editor.setSize('100%','470px');
    // 编辑器按键监听
    editor.on("keypress", function() {
        // 显示智能提示
        editor.showHint(); // 注意，注释了CodeMirror库addon中show-hint.js第132行的代码（阻止了代码补全，同时提供智能提示）
    });

</script>


<script type="text/javascript">
    $(function(){

        $(".tbox").click(function(){
            $('#myModal1').modal('show') //显示模态框
        })

    });
    </script>

</html>